import {Line} from 'vue-chartjs'

export default({
  extends : Line,
  props : ['chartData'],
  data () {
    return {
      gradient: null
    }
  },
  watch: {
    chartData() {
      this.render(); //动态更新数据
    }
  },
  mounted () {
    //配置渐变背景颜色
    this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradient.addColorStop(0, 'rgba(73,169,238, 0.5)')
    this.gradient.addColorStop(0.5, 'rgba(73,169,238, 0.25)');
    this.gradient.addColorStop(1, 'rgba(73,169,238, 0)');
    this.render();
  },
  methods : {
    render(){
      this.renderChart({
        labels: this.chartData.labels,
        datasets: [
          {
            label : this.chartData.label,
            borderColor: this.chartData.borderColor || '#49a9ee',
            pointBackgroundColor: this.chartData.pointBackgroundColor || '#49a9ee',
            borderWidth: 1,
            pointBorderColor: this.chartData.pointBorderColor || '#49a9ee',
            backgroundColor: this.gradient,
            data: this.chartData.data
          }
        ]
      },  {
        responsive: true, 
        maintainAspectRatio: false
      })
    }
  }
})
